<clr-modal [(clrModalOpen)]="addGroupOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
    <h3 class="modal-title">{{'GROUP.NEW_MEMBER' | translate}}</h3>
    <div class="modal-body">
        <inline-alert class="modal-title"></inline-alert>
        <label>{{ 'GROUP.NEW_USER_INFO' | translate}}</label>
        <form #groupForm="ngForm" class="clr-form clr-form-horizontal">
            <div class="clr-form-control">
                <label class="required clr-control-label">{{'GROUP.GROUP' | translate}} {{'GROUP.NAME' | translate}}</label>
                <div class="clr-control-container" [class.clr-error]="(groupName.invalid && (groupName.touched||groupName.dirty)) || !isGroupNameValid">
                    <div class="clr-input-wrapper" (mouseleave)="leaveInput()">
                        <input class="clr-input" type="text" id="group-name"   [(ngModel)]="memberGroup.group_name"
                               name="groupName"
                               #groupName="ngModel"
                               required autocomplete="off" (keyup)="input()">
                        <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                        <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
                        <div class="selectBox"  [style.display]="searchedGroups.length ? 'block' : 'none'" >
                            <ul>
                                <li *ngFor="let group of searchedGroups" (click)="selectGroup(group.group_name)">{{group.group_name}}</li>
                            </ul>
                        </div>
                    </div>
                    <clr-control-error *ngIf="(groupName.invalid && (groupName.touched||groupName.dirty)) || !isGroupNameValid" class="tooltip-content">
                        {{ groupTooltip | translate }}
                    </clr-control-error>
                </div>
            </div>
                <div class="clr-form-control">
                    <label class="clr-control-label">{{'GROUP.ROLE' | translate}}</label>
                    <div class="clr-control-container">
                        <clr-radio-wrapper  *ngFor="let projectRoot of projectRoots">
                            <input clrRadio type="radio" name="member_role" id="{{'check_root_project_' + projectRoot.NAME}}" [value]="projectRoot.VALUE" [(ngModel)]="roleId">
                            <label for="{{'check_root_project_' + projectRoot.NAME}}">{{ projectRoot.LABEL | translate}}</label>
                        </clr-radio-wrapper>
                    </div>
                </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
        <button [clrLoading]="btnStatus" type="button" class="btn btn-primary" [disabled]="!isValid()" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
    </div>
</clr-modal>
